<template>
  <div class="content">
    <h2 style="text-align: center; padding-top: 10px;">视频文件添加</h2>

    <el-form ref="formRef" style="max-width: 100%;margin-top: 30px;" :model="fromdata" :rules="rules"
      label-width="auto">
      <el-form-item label="文章标题" prop="vname">
        <el-input v-model="fromdata.vname" />
      </el-form-item>
      <el-form-item label="视频封面" prop="vimg">
        <!-- <el-input v-model="fromdata.vimg" /> -->
        <!-- <br></br> -->
        <Tuku v-model="fromdata.vimg"></Tuku>
      </el-form-item>
      <el-form-item label="作者名字" prop="username">
        <el-input v-model="fromdata.username" />
      </el-form-item>


      <el-form-item label="视频播放量" prop="count">

        <el-input-number v-model="fromdata.count" :precision="1" :step="0.1" :max="100" />
      </el-form-item>
      <el-form-item label="视频源文件" prop="videoplay">
        <!-- <el-input v-model="fromdata.videoplay" /> -->
        <!-- <Tuku v-model="fromdata.videoplay"></Tuku> -->
        <VideoKu v-model="fromdata.videoplay"></VideoKu>
      </el-form-item>
      <el-form-item class="subbtn">
        <el-button type="primary" @click="submitForm(formRef)">
          提交
        </el-button>
        <el-button @click="resetForm(formRef)">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import Tuku from '../../components/Tuku.vue';
import { CarVideosApi } from '../../api';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import VideoKu from '../../components/VideoKu.vue';
const router = useRouter()

const num = ref(0)

const formRef = ref(null);
const fromdata = reactive({
  vname: '',
  vimg: '',
  username: '',
  videoplay: '',
  count: ''
})
const rules = reactive({
  vname: [
    { required: true, message: '请输入当前文章标题', trigger: 'blur' },
    { min: 5, message: '文章标题不能少于5个字', trigger: 'blur' },
  ],
  vimg: [
    { required: true, message: '请输入当前视频封面', trigger: 'blur' },
  ],
  videoplay: [
    { required: true, message: '请输入当前文章视频文件', trigger: 'blur' },

  ],
})

const formsubmit = () => {
  CarVideosApi.insert.call({
    vname: fromdata.vname,
    vimg: fromdata.vimg,
    username: fromdata.username,
    videoplay: fromdata.videoplay,
    count: fromdata.count
  }).then(res => {
    console.log(res);
    // alert('添加成功')
    ElMessage.success('添加成功')
    //路由跳转 - 文章列表里面
    router.push({ name: 'carvideoList' })

  })
}

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      formsubmit()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.content {
  width: 80%;
  height: 80vh;
  background: url(../../assets/addp.png) 100% 100%;

  border-radius: 13px;
  margin-top: 20px;
  margin-left: 10%;
}

.el-input {
  width: 400px;
}

.el-form-item {
  margin-bottom: 20px;
  margin-left: 10px;
}

.subbtn {
  margin-left: 15%;

  .el-button {
    width: 115px;
  }
}
</style>